<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>人员管理</title>
    <link rel="stylesheet" href="./css/iview.css">
    <script src="./js/vue.js"></script>
    <script src="./js/iview.js"></script>
    <style>
        html,
        body,
        .app {
            width: 100%;
            height: 100%;
            font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        }

        .p-title {
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #e2e2e2;
            padding-left: 16px;
        }
    </style>
</head>

<body>
    <div id="app" class="app">
        <Row class="p-title">
            <i-Col span="2" class="p-title-main"><span>薪资明细</span></i-Col>
        </Row>
        <Row class="salary-search-wrap">

            <i-Col span="2" style="line-height:inherit">
                请选择导入月份
            </i-Col>
            <i-Col span="4">

                <Date-picker type="month" placeholder="选择月" style="width: 200px"></Date-picker>
            </i-Col>
            <i-Col span="4">
                <i-Button type="primary">查询</i-Button>
            </i-Col>
            <i-Col span="2">
                文件导入：
            </i-Col>
            <i-Col span="6">
                <Upload action="//jsonplaceholder.typicode.com/posts/">
                    <i-Button type="ghost" icon="ios-cloud-upload-outline">上传文件</i-Button>
                </Upload>
            </i-Col>
        </Row>
        <div>
            <template>
                <i-Table :context="self" :data="tableData" :columns="tableColumns" stripe>
                </i-Table>
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="tableDataTotal" :current="1" @on-change="changePage"></Page>
                    </div>
                </div>
            </template>
        </div>
    </div>
</body>
<script>
    // vue 实例
    var app = new Vue({
        el: '#app',
        data: {
            treeData: {},
            active: 1,
            addMember: false,
            addGroup: false,
            tableDataTotal: 0,
            tableData: [{
                name: '',
                count: ''
            }],
            tableColumns: [{
                title: '职位名称',
                key: 'name'
            }, {
                title: '人数',
                key: 'count'
            }, {
                title: '操作',
                key: 'action',
                width: 120,
                render(row) {
                    return `<i-button type="text" size="small" @click="alert(row.name)">编辑</i-button><i-button type="text" size="small">删除</i-button>`;
                }
            }]

        },
        created: function () {
            //页面载入时，请求数据
            this.getData();

        },
        methods: {
            //获取数据
            getData: function () {
                // $.post('./getData',function(response){
                //      this.treeData=response.data;
                //  });
            },
            changePage(date) {

            }
        }
    })
</script>

</html>